<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataRyfh } from "@/api/search";
import { addOrUpdateRyfh } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");

// 加载html
const initHtml = () => {
  searchDataRyfh({ m: "组织指挥-指挥主体" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "指挥主体")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "市区人员防护行动由市人民防空指挥部指挥控制中心的综合计划、人员防护组，情报信息部的综合情报组、警报通信组、信息防护组，政治工作部的宣传动员组、心理防护组，综合保障部的保障计划组、医疗救护和防化防疫保障组、交通运输保障组、后勤物资器材保障组，统一组织指挥协调人员防护行动。各区、街道建立相应机构，负责本区、街道的人口疏散工作落实。疏散地域的县、区、乡镇、村屯应建立相应的接收安置机构。在重要的车站等交通枢纽应开设现场指挥机构，必要时可设立机动指挥所。各级疏散指挥机构应明确指挥员和工作人员，明确指挥编组、职责任务，明确指挥机构开设的时间和地点，明确和落实有关保障措施。<br/>1.指挥控制中心<br/>（1）综合计划和评估组<br/>（2）人员防护指挥组<br/>（3）临时指挥组<br/>2.情报信息部<br/>（1）综合情报组<br/>（2）警报通信组<br/>（3）信息防护组<br/>3.政治工作部<br/>（1）宣传动员组<br/>（2）心理防护组<br/>4.综合保障部<br/>（1）保障计划组<br/>（2）医疗救护和防化防疫保障组<br/>（3）交通运输保障组<br/>（4）后勤物资器材保障组"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateRyfh({
      m: "组织指挥-指挥主体",
      data: [
        {
          k: "指挥主体",
          v: valueHtml.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (!editor) return;
  editor.destroy();
});
</script>
<template>
  <div class="">
    <FirstTitle name="指挥主体" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>